<template>
  <div class="regStatusManagement-container">
    <el-row class="header-btn">
      <el-col :span="12" class="query">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
          <el-form-item>
            <el-input
                size="small"
                v-model.trim="queryForm.majorName"
                placeholder="请输入查询条件"
                clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="queryData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-table
        :data="studentList"
        height="820"
        :element-loading-text="elementLoadingText"
    >
      <el-table-column show-overflow-tooltip type="selection"></el-table-column>
            <el-table-column type="index"></el-table-column>
<!--      <el-table-column prop="id" label="id"></el-table-column>-->
<!--      <el-table-column prop="stuId" label="学号" width="130px"></el-table-column>-->
      <el-table-column prop="stuName" label="姓名" width="160"></el-table-column>
      <el-table-column prop="admissionNumber" label="学生考号"></el-table-column>
      <el-table-column prop="idCard" label="身份证"></el-table-column>
      <el-table-column prop="registeringTime" label="报到时间"></el-table-column>
      <el-table-column label="报到情况" width="200">
        <template slot-scope="scope">
          <el-switch
              style="display: block"
              :value="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @click.native="changeStatus(scope.row.id, scope.row.status)">
          </el-switch>

<!--&lt;!&ndash;          <span v-if="scope.row.regStatus == 0">No</span>&ndash;&gt;-->
<!--&lt;!&ndash;          <span v-else-if="scope.row.regStatus == 1">Yes</span>&ndash;&gt;-->
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
        :layout="layout"
        :total="total"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      studentList: null,
      listLoading: true,
      layout: 'total',
      total: 0,
      selectRows: '',
      elementLoadingText: '正在加载...',
      queryForm: {
        query: '',
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    setSelectRows(val) {
      this.selectRows = val
    },
    handleEdit() {

    },
    handleDelete() {

    },
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryForm.pageSize = newSize
      this.fetchData()
    },
    handleCurrentChange(newPage) {
      this.queryForm.pageNum = newPage
      this.fetchData()
    },
    queryData() {
    },
    async fetchData() {
      const {data : res} = await this.$http.get('studentRegStatus')
      // console.log(res)
      this.studentList = res.data
      this.total = res.total
    },
    async changeStatus(id, status) {

      let statusText = status ? '未报到' : '已报到'
      status = !status

      // 提示消息
      const re = await this.$confirm(`是否更改该学生状态为 ${statusText} ?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then().catch(err => err)

      // console.log(re)
      if (re != 'confirm') return this.$message.info('取消了更改')

      const {data : res} = await this.$http.get('uRegisterStatus?id=' + id + '&status=' + status)

      if (res.code == 500) return this.$message.error('更改失败')
      if (res.code != 200) return this.$message.error('更改失败')

      this.$message.success('学生报到信息修改成功！')
      this.fetchData()


    }
  }
}
</script>

<style lang="less" scoped>
.regStatusManagement-container {
  width: 98%;
  background: white;
  padding: 12px 16px 12px 16px;
}

.header-btn {
  //text-align: left;
  //display: flex;
  //justify-content: space-between;
  //align-items: center;
  //color: black;
  //font-size: 20px;

  >.query {
    height: 22px;
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-items: center;
  }
}
.el-table >.el-table-column {
  height: 12px;
}

</style>
